<template>
  <div class="header">
    <div class="h-m">
      <div class="title">晋州市高标准农田综合管理平台</div>
      <div class="h-right">
        <div class="tab_list">
          <div
            v-for="item in pageList"
            :key="item.path"
            :to="item.path"
            @click="setOnTab(item.path)"
            :class="{ active: onTab == item.path }"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="h-date">
          <span class="clock">{{ clock }}</span>
          <span class="day">{{ getDate }}</span>
          <span class="btn">管理系统</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

const pageList = ref([
  {
    name: "建设总览",
    path: "/construct",
  },
  {
    name: "项目管理",
    path: "/project",
  },
  {
    name: "数字农业",
    path: "/digit",
  },
  {
    name: "建后管护",
    path: "/nurse",
  },
  {
    name: "应用系统",
    path: "/application",
  },
]);

const getDate = computed(() => {
  return (
    new Date().getFullYear() +
    "-" +
    (new Date().getMonth() + 1) +
    "-" +
    new Date().getDate()
  );
});
let clock = ref("");
function getClock() {
  clock.value =
    new Date().getHours() +
    ":" +
    new Date().getMinutes() +
    ":" +
    new Date().getSeconds();
}
const timer = setInterval(() => {
  getClock();
}, 1000);

let onTab: any = ref("/construct");

const setOnTab = (path: string) => {
  router.replace(path);
};
watch(route, () => {
  onTab.value = "/" + route.path.split("/")[1];
});

onBeforeUnmount(() => {
  clearInterval(timer);
});
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 128px;
  background: url("@/assets/header/top_title_bg.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  z-index: 10;

  .h-m {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 30px;
    .title {
      font-family: fan;
      font-size: 38px;
      font-weight: 400;
      color: #fff;
      text-shadow: 2px 4px 2px #205efd;
    }

    .h-right {
      display: flex;
      flex: 1;
      align-self: flex-end;
      justify-content: space-between;
      margin-left: 123px;

      .tab_list {
        display: flex;

        div {
          width: 186px;
          font-family: fan;
          font-size: 23px;
          line-height: 50px;
          color: #28ebe4;
          text-align: center;
          cursor: pointer;
          background: url("@/assets/header/nav_but_b.png") no-repeat;
        }

        .active {
          color: #fff;
          text-shadow: 2px 4px 2px #205efd;
          background: url("@/assets/header/nav_but_a.png") no-repeat;
        }
      }

      .h-date {
        align-self: center;

        .clock {
          font-size: 20px;
          font-weight: bold;
          color: #d6e4ff;
        }

        .day {
          margin-right: 15px;
          margin-left: 10px;
          font-size: 16px;
          color: #d6e4ff;
        }

        .btn {
          font-size: 16px;
          color: #28ebe4;
        }
      }
    }
  }
}
</style>
